
html,body{
    width: 100%;
    height: 100%;
}
#app{
    width: 100%;
    height: 100%;
    // background: url(../image/jiubeibeijjing.png)  no-repeat 0 100%;
    // background-size: 100%;
    background-image: linear-gradient(#FFEBBA,#8788FF);
    position: relative;
    overflow: hidden;
    .main{
        width: 100%;
        height: 100%;
    }
    .shoushi{
        position: absolute;
        top: 410px;
        left: 30px; 
    }
    .kettle{
        position: absolute;
        top: 20px;
        left: -15px;
    }
    @keyframes Rotate{
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(45deg);
        }
    }
    .kettle-r{
        transform: rotate(45deg);
        animation-name: Rotate;
        /* 持续时间 */
        animation-duration: 1s;
    }
    .img-wenzi{
        position: absolute;
        width: 70%;
        top: 410px;
        left: 15%;
        z-index: 2;
    }
    .img-jianzhu{
        position: absolute;
        width: 100%;
        top: 650px;
        left: -180px;
    }
    .button-satrt {
        position: absolute;
        display: block;
        width: 600px;
        height: 150px;
        border-radius:100px ;
        background-color: #fff;
        line-height: 150px;
        text-align: center;
        top: 1520px;
        left: calc((100% - 600px) / 2);
        z-index: 2;
        font-size: 32px;
        font-weight: 500;
    }
    .logo-img{
        position: absolute;
        width: 300px;
        left: calc((100% - 300px) / 2);
        bottom: 130px;
        z-index: 2;
    }
    .bottom-img{
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
    }

}